<template>
   <div class="IndexTable">
        <ul>
          <router-link to="/"><li :class="{active:changeIndex==1}" @click="passIndex(1)"> 个性推荐</li></router-link>
          <router-link to="/musiclist"> <li :class="{active:changeIndex==2}" @click="passIndex(2)">歌单</li></router-link>
          <router-link to="/RecommendedPlaylist"> <li :class="{active:changeIndex==3}" @click="passIndex(3)"> 排行榜</li></router-link>
          <router-link to="/singer"> <li :class="{active:changeIndex==4}" @click="passIndex(4)"> 歌手</li></router-link>
        </ul>
     </div> 
</template>

<script>
export default {
    data(){
      return {
          changeIndex:this.$Store.state.homePage.passIndex||1,
      }
    },
    // computed:{
    //   change(){
    //     return this.$Store.state.homePage.passIndex
    //   }
    // },
    methods:{
      //改变高亮
       passIndex(num){
         this.$Store.commit("passIndex",num)
    }
},
mounted(){
  console.log(this.$Store.state.homePage.passIndex)
}
}
</script>

<style lang="less" scoped>
      .IndexTable{
    margin:20px 0;
    ul{
      width:300px;
      height:30px;
      display:flex;
      text-align: center;
      li{
        margin-right:10px;
        // width:300px/4;
        color:black;

      }
        .active{
        font-size:20px;
         font-weight: 500;
         border-bottom: 3px solid red;
         margin-top:-4px;
        }
    }
  }
</style>